<template>
  <div class="mainbox">
    <div>
      <a-menu
        mode="horizontal"
        v-model:selectedKeys="activeKey"
        @select="selectMenu"
      >
        <a-sub-menu v-if="getLocalToken()" @select="selectMenu" style="float: right">
          <template #title>{{ infoData.u_name }}({{infoData.u_id}})</template>
          <a-menu-item :key="'/user/information?u_id='+infoData.u_id">个人空间</a-menu-item>
          <a-menu-item :key="'/user/login'" @click="exit">退出</a-menu-item>
        </a-sub-menu>
        <a-button v-else type="link" style="float: right; margin: 6px" @click="selectPath('/user/login')">登录</a-button>

        <div
          class="logo"
          style="float: right; margin-left: 30px"
          @click="selectPath('/user/information')"
        >
          <a-avatar
            v-if="infoData.u_avatar"
            :src="'/api/avatar/' + infoData.u_avatar"
          />
          <a-avatar v-else>
            <template #icon>
              <UserOutlined />
            </template>
          </a-avatar>
        </div>
        <!--a-menu-item  :key="'/user/announcement'" style="float: right">
          消息通知
        </a-menu-item-->

        <a-menu-item v-if="getLocalToken()" :key="'/user/publisharticle'" style="float: right">
          发布文章
        </a-menu-item>

        <div
          class="logo"
          style="float: left; margin-left: 30px"
          @click="selectPath('/user/mainview')"
        >
          
            <HomeOutlined :size="40" />
        </div>
      </a-menu>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
import { defineComponent, ref } from "vue";
import { createFromIconfontCN, HomeOutlined } from "@ant-design/icons-vue";
import { get, del, post, tip, removeLocalToken,getLocalToken } from "@/common";

const IconFont = createFromIconfontCN({
  scriptUrl: "https://at.alicdn.com/t/font_2923667_bzs494muz6s.js",
});

const infoData = ref({});
const getInfo = () => {
  get("/user/home/curr-user").then((res) => {
    infoData.value = res.data;
  });
};
const exit = () => {
  del("/user/home/exit").then((res) => {
    tip.success("您已成功退出系统，请重新登录！");
    removeLocalToken();
    router.push({ path: "/user/login" });
    infoData.value = {};
  });
};

export default defineComponent({
  components: {
    IconFont,
    HomeOutlined
  },
  setup() {
    getInfo();
    const activeKey = ref("");
    const router = useRouter();
    const selectMenu = ({ item, key, selectedKeys }) => {
      console.log(activeKey.value);
      selectPath(key);
    };

    const selectPath = (key) => {
      // router.push({ path: key });
      // activeKey.value = "";
      window.location.href = key;
    };
    return {
      router,
      activeKey,
      selectMenu,
      selectPath,
      infoData,
      getInfo,
      exit,
      getLocalToken
    };
  },
});
</script>

<style>
.logo {
  cursor: pointer;
}
/*.ant-menu-horizontal > .ant-menu-item-selected {
  border-bottom: none;
}
.ant-menu-horizontal > .ant-menu-item-active {
  border-bottom: none;
}
.ant-menu-horizontal > .ant-menu-item:hover {
  border-bottom: none;
}*/
.mainbox {
  width: 100%;
  height: 100%;
  background-image: url("/public/uhome-backimg.jpeg");
  background-size: 100%, 100%;
}
.content {
  width: 70%;
  min-height: 100vh;
  margin: 20px 15% 0 15%;
}
</style>
